<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input
        v-model="listQuery.content"
        placeholder="请输入查询内容"
        style="width: 200px;"
        class="filter-item"
        @keyup.enter.native="handleFilter" />
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">查询</el-button>
      <el-button v-waves class="filter-item" type="default" icon="el-icon-refresh" @click="tableReset()">刷新</el-button>
      <span class="filter-item right-btns">
        <el-button class="opt-btn" type="primary" @click="setAsRead">标记为已读</el-button>
        <el-button class="opt-btn" type="primary" @click="deleteSelected">删除</el-button>
      </span>
    </div>
    <el-table
      v-loading="listLoading"
      :data="listQuery.list"
      :border="true"
      fit
      highlight-current-row
      style="width: 100%;"
      @selection-change="handleSelectionChange">
      <el-table-column type="index" align="center"/>
      <el-table-column type="selection" width="55"/>
      <!-- <el-table-column label="代码" prop="actionCode" align="left" class-name="small-padding fixed-width" min-width="60px"/>
      <el-table-column label="名称" prop="actionName" align="left" class-name="small-padding fixed-width" min-width="80px"/> -->
      <el-table-column label="消息内容" header-align="center" align="left" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <span :class="{'msg-read': scope.row.isRead === '1'}">{{ scope.row.content }}</span>
        </template>
      </el-table-column>
      <el-table-column label="时间" align="center" class-name="small-padding fixed-width" width="200px">
        <template slot-scope="scope">
          <span :class="{'msg-read': scope.row.isRead === '1'}">{{ scope.row.created | moment('YYYY-MM-DD HH:mm') }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="160px">
        <template slot-scope="scope">
          <el-button v-waves type="primary" plain size="mini" @click="edit(scope.row)">修改</el-button>
          <el-button v-waves type="danger" plain size="mini" @click="del(scope.row)">删除</el-button>
        </template>
      </el-table-column> -->
    </el-table>
    <pagination
      v-show="listQuery.total > 0"
      :total="listQuery.total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.rows"
      @pagination="getList" />

    <add-edit-dialog ref="editDialog" :loading="isSubmitting" @ok="handleOk"/>

  </div>
</template>

<script>

import waves from '@/directive/waves' // Waves directive
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import DelBoxMixin from '@/mixins/delBox'

import sysMsgApi from '@/api/msg-manage/sys-msg'
import addEditDialog from './add-edit'

export default {

  components: {
    Pagination,
    addEditDialog
  },

  directives: {
    waves
  },

  mixins: [DelBoxMixin],

  data() {
    return {
      listLoading: true,
      listQuery: {
        page: 1,
        rows: 10,
        total: 0,
        list: []
      },
      isSubmitting: false,
      selectionedList: []
    }
  },

  created() {
    this.tableReset()
  },

  methods: {

    // typeFormatter(row, column, cellValue, index) {
    //   const types = (cellValue || '').split(',')
    //   return types.map(t => dicData.typeMap[t]).join('，')
    // },

    tableReset() {
      this.listQuery = {
        page: 1,
        rows: 10,
        total: 0,
        list: []
      }
      this.getList()
    },

    getList() {
      this.listLoading = true
      const params = Object.assign({}, this.listQuery)
      delete params.total
      delete params.list
      sysMsgApi.getList(params).then(resp => {
        this.listQuery.list = resp.data.list
        this.listQuery.total = resp.data.total || 0
        this.listLoading = false
      }).catch(resp => {
        this.listLoading = false
        this.$message.error(resp.message)
      })
    },

    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },

    add() {
      this.$refs.editDialog.show()
    },

    edit(item) {
      if (item && item.id) {
        this.$refs.editDialog.show({
          id: item.id
        })
      } else {
        this.$message.warning('请选择要修改的数据')
      }
    },

    handleOk(formData, isEdit) {
      if (isEdit) {
        // edit
        this.isSubmitting = true
        sysMsgApi.edit(formData).then(resp => {
          this.$message.success(resp.message)
          this.isSubmitting = false
          this.$refs.editDialog.close()
          this.getList()
        }).catch(resp => {
          this.isSubmitting = false
          this.$message.error(resp.message)
        })
      } else {
        // add
        this.isSubmitting = true
        sysMsgApi.add(formData).then(resp => {
          this.$message.success(resp.message)
          this.isSubmitting = false
          this.$refs.editDialog.close()
          this.getList()
        }).catch(resp => {
          this.isSubmitting = false
          this.$message.error(resp.message)
        })
      }
    },

    del(item) {
      this.$$delBox().then(resp => {
        sysMsgApi.deleteById({
          id: item.id
        }).then(resp => {
          this.$message.success(resp.message)
          this.getList()
        }).catch(resp => {
          this.$message.error(resp.message)
        })
      }).catch(() => {})
    },

    handleSelectionChange(val) {
      this.selectionedList = val
    },

    setAsRead() {
      sysMsgApi.setAsRead(this.selectionedList.map(r => r.id)).then(resp => {
        this.$message.success(resp.message)
        this.getList()
        this.$store.dispatch('getMsgCount')
      }).catch(resp => {
        this.$message.error(resp.message)
      })
    },

    deleteSelected() {
      this.$$delBox().then(resp => {
        sysMsgApi.deleteByIds(this.selectionedList.map(r => r.id)).then(resp => {
          this.$message.success(resp.message)
          this.getList()
          this.$store.dispatch('getMsgCount')
        }).catch(resp => {
          this.$message.error(resp.message)
        })
      }).catch(() => {})
    }
  }
}
</script>

<style lang="scss" scoped>
.msg-read {
  color: #bbbbbb;
}
</style>

